<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Audi</title>
		<link rel="stylesheet" href="css/new_file.css" />
		<style type="text/css"></style>
		<script type="text/javascript" src="js/jquery-3.0.0/jquery-3.0.0.js" ></script>	
		
	</head>
	<body>
		<div class="quanju">
			<!--导航-->
			<div class="yemei">
				<div class="ym">
					<div class="LOGO"><img src="img/一汽大众.png"/></div>
					<div class="logo"><img src="img/LOGO.png"/></div>
					<div class="lingxing"style="background-color: #AB192D;">
						<div class="zi"style="color: #ffffff;" >首页</div>
					</div>
					
					<div class="lingxingone">
						<div class="zi"style="width:140px;margin-left: 5px;">奥运运动基因</div>
						<div class="fudong">
							<div class="fd">
								<div class="fdzi">百年赛道历史</div>
							</div>
							<div class="fd"style="margin-top:-40px;margin-left:731.5px;">
								<div class="fdzi">体验赛道基因</div>
							</div>
						</div>
						<script>
							$(function(){
						$(".lingxingone").mouseover(function(){
							$(".lingxingone").index(this);
							$(".fudong").show()
						})
						$(".lingxingone").mouseleave(function(){
							$(".lingxingone").index(this);
							$(".fudong").hide()
						})
					})
						</script>
					</div>
					
					<div class="lingxing"style="margin-top: -83px;margin-left: 476px;">
						<div class="zi">运动车型</div>
					</div>
					
					<div class="lingxing"style="margin-top: -83px;margin-left: 626px;">
						<div class="zi">线下体验中心</div>
					</div>
					
					<div class="lingxing"style="margin-top: -83px;margin-left: 776px;">
						<div class="zi">热门赛事</div>
					</div>
					
					<div class="lingxing"style="margin-top: -83px;margin-left: 926px;">
						<div class="zi">奥迪运动商城</div>
					</div>
					
			</div>
			<!--banner-->	
			<div class="bannerbox">
			<div class="bannertu">
				<img src="img/banner-1.png" />
				<img src="img/banner-3.png" />
				<img src="img/banner-1.png" />
				<img src="img/banner-3.png" />
				<img src="img/banner-1.png" />
				<img src="img/banner-3.png" />
			</div>
			<div class="lunbobox">
				<div class="lunbo"></div>
				<div class="lunbo" style="margin-left: 8px;"></div>
				<div class="lunbo" style="margin-left: 8px;"></div>
				<div class="lunbo" style="margin-left: 8px;"></div>
				<div class="lunbo" style="margin-left: 8px;"></div>
			</div>
			<script>
				var n=0
				function run(){
					if(n<3){n++}else{
						n=1;
						$(".bannertu").css({left:0})	
					}
					$(".bannertu").stop(true,true).animate({left:-1600*n},500)
				}
				var q = setInterval(run,3000)
				$(".lunbo").click(function(){
					clearInterval(q)//点按钮停止之前的定时器
					n=$(".lunbo").index(this)
					$(".bannertu").stop(true,true).animate({left:-1600*n},500)
					setTimeout(function(){//点按钮后4秒中后重新定时
					clearInterval(q)//避免连续点击按钮重复定时
					q = setInterval(run,3000)
				},4000)//4秒	
			}
		)
			</script>
			<div class="yewei" style="background-image: url(img/点点.png)">
				<div class="ywone">
				<img src="img/banner-11.png"style="margin-top: 0;" />
				<img src="img/banner-22.png"style="margin-left: -90px;"/>
				<img src="img/banner-33.png"style="margin-left: -83px;" />
				</div>
				<div class="ywtwo">
					<img src="img/banner-44.png" />
					<img src="img/banner-55.png" style="margin-left: -190px;"/>
				</div>
				<div class="wei">
					<div class="weizi"style="width: 64px;">预约试驾</div>
					<div class="weizi" style="width: 80px;margin-left: 30px;">查询经销商</div>
					<div class="weizi">一汽-大众奥迪</div>
					<div class="weizi" style="width: 64px;">联系我们</div>
					<div class="weizi"style="width: 64px;">版权说明</div>
					<div class="weizi"style="width: 26px;margin-left: 940px;">
						<img src="img/微博.png" />
					</div>
					<div class="weizi"style="width: 26px;margin-left: 10px;">
						<img src="img/微信.png" />
					</div>
					<div class="weizi" style="width: 26px;margin-left: 10px;">
						<img src="img/天猫.png" />
					</div>
				</div>
			</div>
		</div>
			
		
	</body>
</html>
